<template>
  <main class="shopCart">
    <section class="shopCart-con">
      <div class="cl">
        <h4>购物车</h4>
        <a href="javascript:;" @click="toPay">结算</a>
        <p>合计：{{ total }}元</p>
      </div>
      <ul>
        <li class="cl" v-for="item in list" :key="item.id">
          <div>
            <input
              type="checkbox"
              name="goodsItem"
              :value="{
                ...item,
              }"
              v-model="goodsList"
            />
            <img :src="host + item.image" alt="" />
          </div>
          <div>
            <h5>{{ item.name }}</h5>
            <p>￥{{ item.price }}</p>
          </div>
          <div>
            <span @click="upAmount(item.id, item.goods_id, -1)">&#xe600;</span>
            <input type="text" disabled :value="item.amount" />
            <span @click="upAmount(item.id, item.goods_id, 1)">&#xe601;</span>
          </div>
          <span @click="delGoods(item.id)">&#xeaf2;</span>
        </li>
      </ul>
    </section>
  </main>
</template>

<script>
import { mapState } from "vuex";
import config from "../../config";
import { removeCartApi, upAmountApi } from "../../api";
export default {
  name: "ShoppingCart",
  data() {
    return {
      host: config.host,
      list: [],
      goodsList: [],
    };
  },
  computed: {
    ...mapState("shoppingCart", ["cartList"]),
    ...mapState("user", ["isLogin"]),
    total() {
      if (this.goodsList.length === 0) return 0;
      return this.goodsList.reduce((acc, curr) => {
        return (acc += curr.amount * curr.price);
      }, 0);
    },
  },
  watch: {
    cartList: {
      immediate: true,
      deep: true,
      handler(newValus) {
        this.list = newValus;
      },
    },
    isLogin: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.$store.dispatch("shoppingCart/getCart");
        }
      },
    },
  },
  methods: {
    // 删除购物车中的商品
    delGoods(id) {
      removeCartApi(
        (response) => {
          if (response.data.status === 1) {
            this.$bus.$emit("showTips", "移出购物车成功！");
            // 重新获取购物车数据
            this.$store.dispatch("shoppingCart/getCart");
            // 重新获取购物车长度
            this.$store.dispatch("user/getCartLen");
          }
        },
        (err) => {
          console.log(err);
        },
        { id }
      );
    },

    // 修改 购物车商品数量
    upAmount(id, goods_id, change) {
      upAmountApi(
        (response) => {
          if (response.data.status === 1) {
            this.upGoodsList(goods_id, change);
            this.$store.dispatch("shoppingCart/getCart");
          } else {
            this.$bus.$emit("showTips", response.data.message);
          }
        },
        (err) => {
          console.log(err);
        },
        { id, change }
      );
    },

    // 修改要下单商品的数量
    upGoodsList(goods_id, change) {
      this.goodsList.forEach((item) => {
        if (item.goods_id === goods_id) {
          return (item.amount += change);
        }
      });
    },

    // 支付
    toPay() {
      if (this.goodsList.length <= 0) return;
      this.$store.commit("pay/ADDLIST", this.goodsList);
      this.$router.push("/pay");
    },
  },
  mounted() {
    this.$store.dispatch("shoppingCart/getCart");
  },
};
</script>

<style lang="stylus" scoped>
.shopCart {
  width: 100%;
  padding-top: 60px;
  min-width: 800px;
  min-height: 400px;

  .shopCart-con {
    width: 80%;
    min-width: 800px;
    min-height: 400px;
    margin: 0 auto;
    background-color: #f8f8f8;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);

    &>div {
      padding: 30px 30px 0;

      h4 {
        font-size: 26px;
        color: #fe4d1b;
        float: left;
      }

      p {
        float: right;
        padding-right: 20px;
        font-size: 14px;
        line-height: 34px;
      }

      a {
        float: right;
        font-size: 16px;
        padding: 4px 20px;
        text-decoration: none;
        border-radius: 4px;
        background-color: #fe4d1b;
        color: #fff;
      }
    }

    ul {
      padding: 30px;
    }

    li {
      padding: 10px;
      background-color: #fff;
      margin-bottom: 8px;
      position: relative;

      input {
        margin: 0 10px;
        vertical-align: middle;
      }

      img {
        width: 70px;
        vertical-align: middle;
      }

      div {
        float: left;
      }

      div:nth-of-type(n+3) {
        float: right;
      }

      div:nth-of-type(2) {
        padding-left: 12px;

        h5 {
          font-size: 20px;
          line-height: 40px;
        }
      }

      div:last-of-type {
        font-family: 'iconfont';
        padding-top: 12px;

        span {
          font-size: 30px;
          vertical-align: middle;
          color: #fe4d1b;
          cursor: pointer;
        }

        input {
          width: 26px;
          height: 24px;
          vertical-align: middle;
          margin: 0 4px;
          font-size: 14px;
          text-align: center;
          border: 0;
        }
      }

      &>span {
        display: none;
        width: 26px;
        height: 26px;
        font-family: 'iconfont';
        position: absolute;
        top: 0;
        right: 0;
        font-size: 20px;
        color: red;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
      }

      &:hover>span {
        display: block;
      }
    }
  }
}
</style>